<template>
  <view :style="[viewStyle]" class="sc-view" @tap="tapHandler">
    <slot></slot>
  </view>
</template>

<script>
import { backgroundProps, backgroundStyle } from "../../libs/props/background.js";
import { marginProps, marginStyle } from "../../libs/props/margin.js";
import { paddingProps, paddingStyle } from "../../libs/props/padding.js";
import { positionProps, positionStyle } from "../../libs/props/position.js";
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";

const ALIGN_SELF_MAP = {
  start: "start",
  end: "end",
  center: "center",
  "self-start": "self-start",
  "self-end": "self-end",
  baseline: "baseline",
  "first-baseline": "first baseline",
  "last-baseline": "last baseline"
};

const JUSTIFY_SELF_MAP = {
  start: "start",
  end: "end",
  center: "center",
  "self-start": "self-start",
  "self-end": "self-end",
  baseline: "baseline",
  "first-baseline": "first baseline",
  "last-baseline": "last baseline"
};

export default {
  name: "ScView",
  mixins: [mpMixin, mixin],
  props: {
    width: [String, Number],
    height: [String, Number],
    round: {
      type: [String, Number],
      default: 0
    },
    opacity: [Number, String],
    hidden: {
      type: Boolean,
      default: false
    },
    shadow: String,
    border: String,
    zIndex: [Number, String],
    grow: [Number, String],
    shrink: [Number, String],
    basis: [Number, String],
    as: String,
    js: String,
    area: String,
    customStyle: {
      type: Object,
      default: () => ({})
    },
    ...backgroundProps,
    ...marginProps,
    ...paddingProps,
    ...positionProps
  },
  emits: ["click"],
  computed: {
    viewStyle() {
      const style = {
        width: this.width && this.$sc.addUnit(this.width),
        height: this.height && this.$sc.addUnit(this.height),
        borderRadius: this.round && this.$sc.addUnit(this.round),
        opacity: this.opacity,
        boxShadow: this.shadow,
        border: this.border,
        overflow: this.hidden ? "hidden" : undefined,
        zIndex: this.zIndex,
        flexGrow: this.grow,
        flexShrink: this.shrink,
        flexBasis: this.basis && this.$sc.addUnit(this.basis),
        alignSelf: this.as && ALIGN_SELF_MAP[this.as],
        justifySelf: this.js && JUSTIFY_SELF_MAP[this.js],
        gridArea: this.area,
      };
      return this.$sc.deepMerge(
        style,
        backgroundStyle(this),
        marginStyle(this),
        paddingStyle(this),
        positionStyle(this),
        this.customStyle
      );
    }
  },
  methods: {
    tapHandler() {
      this.$emit("click");
    }
  }
};
</script>
